<template>
	<view class="main">
		<header-vue :back="true" title="我的投诉"></header-vue>
		<view v-for="item in 10" :key="item" class="white-box margin32" @click="goPage('/views/mine/detail')">
			<view class="flex between store-title font24">
				<view>订单编号：1331215413256</view>
				<view class="order-status">受理中</view>
			</view>
			<view class="flex start" style="align-items: flex-start;">
				<image src="/static/login/bg.png"></image>
				<view class="flex column between start store-info">
					<view style="display: grid;">
						<view class="font28 fontbold-500 ellipsis" style="width: 100%;">空调清洗高温除尘菌让呼吸更清 新让感觉更合适</view>
					</view>
				</view>
			</view>
			<view class="flex between font28" style="margin-top: 28rpx;">
				<view class="font24" style="color: #999;">投诉时间:2025-06-20</view>
				<view class="flex center fontbold-500 order-btn">
					<view class="flex btn-1">撤销</view>
					<view class="flex btn-2">查看详情</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import headerVue from '../../components/header.vue';
    import { complaintList } from '@/api/index.js'
	export default {
		components: {
			headerVue
		},
		data() {
			return {
                list:[],
            }
		},
        onLoad() {
            complaintList(data).then(res =>{
                
            })
        },
		methods: {
			goPage(url) {
				uni.navigateTo({
					url
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		background: #F6F6F6;
	}

	.margin32 {
		margin: 0 32rpx;
	}

	.white-box {
		background: $uni-bg-color;
		box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
		border-radius: 20rpx;
		padding: 28rpx;
		box-sizing: border-box;
		margin-top: 28rpx;

		.store-title {
			padding-bottom: 28rpx;
			border-bottom: 1rpx solid #DDDDDD;
			margin-bottom: 28rpx;
			color: $uni-text-color-grey1;
		}

		.order-status {
			color: #DF9824;
		}

		image {
			width: 100rpx;
			height: 100rpx;
			border-radius: 12rpx;
			margin-right: 20rpx;
			flex-shrink: 0;
		}

		.store-info {
			height: 100rpx;
			flex: 1;
			width: 0;
			align-items: flex-start;

			.sale-num {
				color: $uni-text-color-grey;
				margin-top: 12rpx;
			}

			.icon-comment {
				margin-left: 26rpx;
			}
		}

		.order-btn {
			color: $uni-text-color-inverse;

			.btn-1 {
				width: 160rpx;
				height: 56rpx;
				background: #DF9824;
				border-radius: 100rpx;
				margin-right: 28rpx;
			}

			.btn-2 {
				width: 160rpx;
				height: 56rpx;
				background: #0785CF;
				border-radius: 100rpx;
			}
		}
	}

	.modal-title {
		margin: 40rpx 0;

		.icon-close {
			position: absolute;
			right: 32rpx;
			top: 50rpx;
		}
	}

	.modal-content {

		.checkbox-box {
			flex-wrap: wrap;

			.checkbox {
				width: calc((100% - 36rpx) / 3);
				height: 86rpx;
				background: #F5F5F5;
				border-radius: 100rpx;
				margin-top: 40rpx;
				margin-right: 18rpx;

				&:nth-child(3n) {
					margin-right: 0;
				}

				.font24 {
					color: $uni-text-color-grey;
					margin-top: 4rpx;
				}
			}

			.active {
				background: #FFEFD5;
			}
		}

		.input-group {
			height: 86rpx;
			background: #F5F5F5;
			border-radius: 60rpx;
			margin: 40rpx 0 54rpx;

			.line {
				width: 40rpx;
				height: 1rpx;
				background: $uni-text-color-grey;
			}

			input {
				text-align: center;
			}
		}
	}

	.modal-footer {
		color: $uni-text-color-inverse;
		margin: 40rpx 0 calc(env(safe-area-inset-bottom) + 20rpx) 0;

		.clear-btn {
			width: 260rpx;
			height: 80rpx;
			background: #DF9824;
			box-shadow: 0rpx 6rpx 12rpx 0rpx rgba(223, 152, 36, 0.3);
			border-radius: 100rpx;
		}

		.submit-btn {
			width: 260rpx;
			height: 80rpx;
			background: #0785CF;
			box-shadow: 0rpx 6rpx 12rpx 0rpx rgba(7, 133, 207, 0.3);
			border-radius: 100rpx 100rpx 100rpx 100rpx;
			margin-left: 60rpx;
		}
	}
</style>